<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
		<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
		<script type="text/javascript" src="js/myjs.js"></script>
	</head>

	<body style="margin: 50px;">

		<div class="section">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<center><img src="img/imageConnect.GIF" class="img-responsive"></center>
					</div>
				</div>
			</div>
		</div>

		<div class="section">
			<div class="container">
				<div class="row">

					<div class="col-md-12  text-center">
						<div class="btn-group btn-group-justified hidden-xs" data-toggle="buttons">
			  <label  class="btn btn-primary btn-lg"">
                <input type="radio" name="sex" autocomplete="off" onclick="showData(1)"> Create Network
              </label>
			  <label  class="btn btn-primary btn-lg">
                <input type="radio" name="sex" autocomplete="off" onclick="showData(2)"> Join Network
              </label>
			  <label  class="btn btn-primary btn-lg">
                <input type="radio" name="sex" autocomplete="off" onclick="showData(3)"> Be Wi-Fi Repeater
              </label>
						</div>
						<div class="btn-group-vertical  visible-xs" data-toggle="buttons">
			  <label  class="btn btn-primary btn-lg">
                <input type="radio" name="sex" autocomplete="off" onclick="showData(1)"> Create Network
              </label>
			  <label  class="btn btn-primary btn-lg">
                <input type="radio" name="sex" autocomplete="off" onclick="showData(2)"> Join Network
              </label>
			  <label  class="btn btn-primary btn-lg">
                <input type="radio" name="sex" autocomplete="off" onclick="showData(3)"> Be Wi-Fi Repeater
              </label>
						</div>
					</div>
				</div>
			</div>

			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div id="d1" style="display: none;">
							<form class="form-horizontal">
								<div class="form-group">
									<label class="control-label">user：</label>
									<input type="text" class="form-control" placeholder="账号" />
									<label class="control-label">passwd:</label>
									<input type="password" class="form-control" placeholder="密码" />
									<div class="text-center" style="margin-top: 7px;">
										<button type="submit" class="btn btn-default">注册</button>
									</div>
								</div>
							</form>
						</div>
						<div id="d2" style="display: none;" class="text-center">
							<h2>A Title</h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipisici elit,
								<br>sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
								<br>Ut enim ad minim veniam, quis nostrud</p>
						</div>
						<div id="d3" style="display: none;">
							<a class="list-group-item active" style="margin-top: 30px;">
								<span class="badge">Scan again</span>
								Please select target Wi-Fi
							</a>
							<div id="list_1">
							
							</div>
							
							<form class="form-horizontal" id="conWifi" style="margin-top: 30px;">
								
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--json文件-->
		<script type="text/javascript">
			var jsonData = {
				'blogs': ['CIG_Badge', 'CIG_Test', 'CIG_Guest']
			};

			$.each(jsonData.blogs, function(index, val) {
				$("#list_1").append("<a  class='list-group-item' onclick='connectWifi(this)'>" + val + "</a>");
			});
		</script>

	</body>

</html>